<template>
  <div class="switch">
    <group class="switch_box">
      <checklist class="switch_list" required :options="checkOptions" @on-change="checkChange" v-model="checkValue"></checklist>
      <cell class="right_arrow" @click.native="nextToWhite" value="点击编辑白名单"></cell>
    </group>
    <group class="switch_box">
      <checklist class="switch_list" required :options="blackCheckOptions" disabled v-model="blackValue"></checklist>
      <cell class="right_arrow" @click.native="nextBlack" value="点击编辑黑名单"></cell>
    </group>
    <div class="means">
      <!-- <div class="means_link"> -->
      <router-link to="../clubUser/whiteDesc">什么是白名单</router-link>
      <router-link to="../clubUser/blackDesc">什么是黑名单</router-link>
      <!-- </div> -->
      <!-- <x-button class="means_black" type="primary" @click.native="nextBlack">黑名单</x-button> -->
    </div>
    <x-button type="primary" class="switch_next" @click.native="nextPage">下一步</x-button>
  </div>
</template>
<script>
import { Group, Cell, XButton, Checklist } from "vux";
import { join } from "path";
import { clearTimeout } from "timers";
export default {
  data() {
    return {
      checkOptions: [{ key: 1, value: "开启白名单" }],
      blackCheckOptions: [{ key: 1, value: "开启黑名单" }],
      isSelect: "",
      isEdit: false,
      checkValue: [],
      blackValue: [1]
    };
  },
  components: {
    Group,
    Cell,
    XButton,
    Checklist
  },
  created() {
    this.clubValue = this.apiService.getSessionData("clubValue");
    if (location.href.split("?")[1]) {
      this.isEdit = true;
    }
    let key;
    if (this.clubValue.whiteListType == 1) {
      key = 1;
    } else {
      key = 0;
    }
    key == 1 && this.checkValue.push(key);
  },
  beforeRouteLeave(to, from, next) {
    this.apiService.setSessionData("clubValue", this.clubValue);
    next();
  },
  methods: {
    checkChange(value, label) {
      value.length === 1 ? (this.isSelect = true) : (this.isSelect = false);
    },
    nextPage() {
      if (this.isSelect) {
        this.clubValue.whiteListType = 1;
      } else {
        this.clubValue.whiteListType = 0;
      }
      if (this.isEdit) {
        if (this.clubValue.clubId) {
          this.apiService.club
            .editclub({
              clubid: this.clubValue.clubId,
              whitelisttype: this.clubValue.whiteListType
            })
            .then(res => {
              this.$router.go(-1);
            });
        } else {
          this.$router.go(-1);
        }
      } else {
        this.$router.push("preview");
      }
    },
    nextBlack() {
      if (this.isEdit) {
        if (this.clubValue.clubId) {
          this.$router.push(
            "../clubUser/blacklist?clubId=" + this.clubValue.clubId
          );
        } else {
          this.$router.push("../clubUser/blacklist");
        }
      } else {
        this.$router.push("../clubUser/blacklist");
      }
    },
    nextToWhite() {
      if (this.isSelect) {
        this.clubValue.whiteListType = 1;
      } else {
        this.clubValue.whiteListType = 0;
      }
      if (this.isEdit) {
        if (this.clubValue.clubId) {
          this.$router.push(
            "../clubUser/whitelist?clubId=" + this.clubValue.clubId
          );
        } else {
          this.$router.push("../clubUser/whitelist");
        }
      } else {
        this.$router.push("../clubUser/whitelist");
      }
    }
  }
};
</script>

<style>
.switch::before {
  content: "";
  display: table;
}
.switch .weui-cell__ft {
  color: #00ac34;
  font-size: 0.25rem;
}
.switch .weui-cells {
  margin-top: 0.8em;
}
.switch .weui-cell {
  padding: 16px 15px;
}
.switch_box {
  position: relative;
}
.switch_box .right_arrow {
  position: absolute;
  top: 0;
  right: 0;
  text-decoration: underline;
  text-decoration-color: #00ac34;
}
.switch_box .weui-cell:before {
  height: 0;
}
.switch_box .weui-cell {
  height: 100%;
  padding-left: 0.5rem;
}
.means {
  display: flex;
  padding: 0.5rem 0.3rem;
  justify-content: flex-end;
  align-items: center;
}
.means a {
  color: #00ac34;
  font-size: 0.25rem;
  text-decoration: underline;
  margin-left: 0.5rem;
}
.means .means_black {
  font-size: 0.3rem;
  width: 1.6rem;
  height: 0.6rem;
  line-height: 0.6rem;
  margin: 0;
}
.switch_next {
  margin-top: 0.5rem;
}
.switch_list p {
  font-size: 0.3rem;
}
.switch_list label span {
  font-size: 0.24rem;
}
</style>


